<template>
    <el-row>
        <el-col :span="16">
            <div style="margin-bottom: 10px">
                <el-tag
                        v-for="tag in post.tags"
                        :key="tag"
                        class="mx-1 tag"
                        closable
                        :disable-transitions="true"
                        @close="handleClose(tag)"
                >
                    {{ tag }}
                </el-tag>
                <el-input
                        style="display: inline"
                        v-if="inputVisible"
                        ref="InputRef"
                        v-model="inputValue"
                        class="ml-1 w-20"
                        size="small"
                        @keyup.enter="handleInputConfirm"
                        @blur="handleInputConfirm"
                />
                <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
                    + New Tag
                </el-button>
            </div>
        </el-col>
        <el-col :span="7">
            <el-input style="margin-bottom: 20px" v-model="post.title" size="large" placeholder="标题"/>
        </el-col>
        <el-col :span="1"></el-col>
    </el-row>
    <QuillEditor theme="snow" :options="editorOption" v-model:content="post.content"
                 :content-type="'html'"/>
    <div style="margin: 25px 5px 0 5px; border-top: 2px solid var(--el-border-color)">
        <p>
            <el-text size="large">备注：</el-text>
        </p>
        <el-input type="textarea" v-model="post.remark" :autosize="{ minRows: 2, maxRows: 5 }"/>
    </div>
    <div>
        <el-button class="send-btn" @click="addPost()" type="primary">发布文章</el-button>
        <el-checkbox class="send-btn" v-model="post.state">公开</el-checkbox>
    </div>

</template>

<script setup>
import {nextTick, ref} from 'vue'
import {ElInput} from 'element-plus'

import {Quill, QuillEditor} from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import {postEdit} from "@/request/post";

name = "PostEditView";

const post = ref({
    title: "",
    content: "<p>这是 vue-quill-editor 的内容！</p>",
    remark: "",
    tags: ['标签一', '标签二', '标签三'],
    state: false
})

// 富文本编辑器配置
const editorOption = ref({
    modules: {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{header: 1}, {header: 2}], // 1、2 级标题
            [{list: 'ordered'}, {list: 'bullet'}], // 有序、无序列表
            [{script: 'sub'}, {script: 'super'}], // 上标/下标
            [{indent: '-1'}, {indent: '+1'}], // 缩进
            [{direction: 'rtl'}], // 文本方向
            [{size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{header: [1, 2, 3, 4, 5, false]}], // 标题
            [{color: []}, {background: []}], // 字体颜色、字体背景颜色
            [{font: []}], // 字体种类
            [{align: []}], // 对齐方式
            ['clean'], // 清除文本格式
            ['link']// 链接、图片、视频
        ],
    },
    placeholder: '请输入正文',

});

const inputValue = ref('')
const inputVisible = ref(false)
const InputRef = ref()

const handleClose = (tag) => {
    post.value.tags.splice(post.value.tags.indexOf(tag), 1)
}

const showInput = () => {
    inputVisible.value = true
    nextTick(() => {
        InputRef.value.input.focus();
    })
}

const handleInputConfirm = () => {
    if (inputValue.value) {
        post.value.tags.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
}

const addPost = () => {
    console.log(post.value)
    let tag = '';
    post.value.tags.forEach(v => {
        tag = tag + ' ' + v;
    });
    let p = {
        ...post.value,
        tags: tag,
        state: post.value.state ? '0' : '1'
    };
    postEdit(p).then(({data}) => {
        console.log(data);
    },err=>{
        console.log(err)
    });
};

</script>

<style scoped>
.send-btn {
    float: right;
    margin: 15px;
}

.tag {
    margin: 10px 10px 0 10px;
}
</style>
